<div class="modal fade" id="new-event-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" data-ng-controller="CalendarController">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{{'CREATE_EVENT'| translate}}</h4>
            </div>
            <div class="modal-body">
                <form name="createForm" novalidate mi-submit="createEventCalendar($parent.pickDay,$parent.pickMonth,$parent.pickYear)">
                    <div class="alert alert-danger" ng-show="isCreateError">
                        <span ng-bind="createError"></span>
                    </div>
                    <table>
                        <tr>
                            <td>{{'EVENT_NAME' | translate}}*</td>
                            <!--            mi-check-unique-name
                                            <span class="help-block" ng-show="createForm.name | eventFilter:createForm:'unique'">
                                            {{'ERROR_NAME_UNIQUE' | translate}}
                                            </span>
                            -->
                            <td>
                                <input type="text" id="name" name="name" ng-model="name" required
                                       placeholder="Tên sự kiện" style="width: 175px"/>
                                <span class="error" ng-show="createForm.name | eventFilter:createForm:'required'">
                                            {{'ERROR_NAME_NULL' | translate}}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>{{'START_DATE' | translate}}*</td>
                            <td>
                                <input type="text" id="curStartTime" name="curStartTime" ng-model="startTime" value="{{$parent.pickedDate | dateTimeFilter :'onlyDate'}}" style="width: 175px"/>
                                <!--<select id="date1" ng-options="date for date in default.dates" name="date1"-->
                                        <!--ng-init="date1 = default.dates[0]" class="form-control" ng-model="date1" mi-check-date>-->
                                <!--</select>-->
                                <!--<select id="month1" ng-options="month for month in default.months" name="month1"-->
                                        <!--ng-init="month1 = default.months[0]" class="form-control" ng-model="month1" mi-check-date>-->
                                <!--</select>-->
                                <!--<select id="year1" ng-options="year for year in default.years" name="year1"-->
                                        <!--ng-init="year1 = default.years[0]" class="form-control" ng-model="year1" mi-check-date>-->
                                <!--</select>-->
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {{'START_TIME' | translate}}*
                            </td>
                            <td>
                                <select id="hour1" ng-options="hour for hour in default.hours" name="hour1" class="form-control"
                                        ng-init="hour1 = default.hours[6]" ng-model="hour1" style="width: 55px" >
                                </select>
                                <select id="minute1" ng-options="minute for minute in default.minutes" name="minute1"
                                        ng-init="minute1 = default.minutes[0]" class="form-control" ng-model="minute1" style="width: 55px">
                                </select>
                                <select id="step1" ng-options="step for step in default.steps" name="step1"
                                        ng-init="step1 = default.steps[0]" class="form-control" ng-model="step1" style="width: 58px">
                                </select>
                                <!--<span class="error" ng-show="createForm.date1 | eventFilter:createForm:'validStart'">-->
                                    <!--{{'ERROR_START_INVALID' | translate}}-->
                                <!--</span>-->
                            </td>
                        </tr>
                        <!--<tr>-->
                            <!--<td>-->
                                <!--{{'END_DATE' | translate}}-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<select id="date2" ng-options="date for date in default.dates" name="date2" class="form-control"-->
                                        <!--ng-model="date2" mi-check-date>-->
                                    <!--<option value="">{{'DATE' | translate}}</option>-->
                                <!--</select>-->
                                <!--<select id="month2" ng-options="month for month in default.months" name="month2"-->
                                        <!--class="form-control" ng-model="month2" mi-check-date>-->
                                    <!--<option value="">{{'MONTH' | translate}}</option>-->
                                <!--</select>-->
                                <!--<select id="year2" ng-options="year for year in default.years" ng-init="year2 = default.years[0]"-->
                                        <!--name="year2" class="form-control" ng-model="year2" mi-check-date>-->
                                <!--</select>-->
                            <!--</td>-->
                        <!--</tr>-->
                        <!--<tr>-->
                            <!--<td>-->
                                <!--{{'END_TIME' | translate}}-->
                            <!--</td>-->
                            <!--<td>-->
                                <!--<select id="hour2" ng-options="hour for hour in default.hours" name="hour2" class="form-control"-->
                                        <!--ng-model="hour2" mi-check-date>-->
                                    <!--<option value="">{{'HOUR' | translate}}</option>-->
                                <!--</select>-->
                                <!--<select id="minute2" ng-options="minute for minute in default.minutes" name="minute2"-->
                                        <!--class="form-control" ng-model="minute2" mi-check-date>-->
                                    <!--<option value="">{{'MINUTE' | translate}}</option>-->
                                <!--</select>-->
                                <!--<select id="step2" ng-options="step for step in default.steps" name="step2"-->
                                        <!--ng-init="step2 = default.steps[0]" class="form-control" ng-model="step2" mi-check-date>-->
                                <!--</select>-->
                                <!--&lt;!&ndash;<span class="error" ng-show="createForm.date2 | eventFilter:createForm:'validEnd'">&ndash;&gt;-->
                                <!--&lt;!&ndash;{{'ERROR_END_INVALID' | translate}}&ndash;&gt;-->
                                <!--&lt;!&ndash;</span>&ndash;&gt;-->
                            <!--</td>-->
                        <!--</tr>-->
                        <tr>
                            <td>
                                {{'LOCATION' | translate}}*
                            </td>
                            <td>
                                <input type="text" id="location" name="location" ng-model="location" required style="width: 175px"/>
                                <span class="error" ng-show="createForm.location | eventFilter:createForm:'required'">
                                {{'ERROR_LOCATION_NULL' | translate}}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {{'DESCRIPTION' | translate}}
                            </td>
                            <td>
                                <textarea name="description" ng-model="description" style="height: 129px;width:400px; resize:none"></textarea>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                {{'EVENT_PRIVACY' | translate}}
                            </td>
                            <td>
                                <input type="radio" name="privacy" checked ng-model="privacy" value="c"/>{{'CLOSE_COMMUNITY' |
                                translate}}
                                <input type="radio" id="privacy-private" name="privacy" ng-model="privacy" value="p"/> {{'PRIVACY' | translate}}
                                <input type="radio" name="privacy" ng-model="privacy" value="g"/> {{'GROUP' | translate}}
                                <input type="radio" name="privacy" ng-model="privacy" value="o"/> {{'OPEN_COMMUNITY' | translate}}
                            </td>
                        </tr>
                        <tr data-ng-hide="privacy == 'p'">
                            <td>

                                {{'EVENT_INVITE'|translate}}

                            </td>
                            <td>
                                <input type="text" name="friends" id="friends" class="token-input"
                                       ng-model="friends" required=""/>
                                <span class="error" ng-show="createForm.friends | shouldDisplayError:createForm:'required'">
                                    {{'ERROR_MESSAGE'|translate}}
                            </span>
                            </td>
                        </tr>
                        <tr data-ng-hide="privacy == 'p'">
                            <td>

                                {{'INVITE_RIGHT'|translate}}

                            </td>
                            <td>
                                <input type="text" name="invitors" id="invitors" class="token-input"
                                       ng-model="invitors"/>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <button type="button" class="btn-style" data-dismiss="modal">{{'BUTTON_CANCEL'| translate}}</button>
                                <input type="submit" class="btn-style" value="{{'BUTTON_CREATE' | translate}}"/>
                            </td>
                        </tr>
                    </table>
                </form>
                <!--<lazy-load src="/lib/skel/event-detail.js"></lazy-load>-->
            </div>
        </div>
    </div>
</div>